<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>商品筛选</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #screen{
            width: 850px;
            margin: 0 auto;
            font-family: 'Microsoft YaHei';
            font-size: 12px;
            border: 1px solid #ccc;
            font-weight: bold;
        }
        #screen ul li{
            border-bottom: 1px dashed #ccc;
            padding: 10px 50px;
            display: flex;
            justify-content: space-around;
            /*align-items: center;*/
        }
        #screen .name{
            width: 10%;
            text-align: right;
            line-height: 20px;
        }
        #screen .content{
            width: 90%;
            text-align: left;
            line-height: 20px;
            color: royalblue;
        }
        #screen .content span{
            display: inline-block;
            padding: 0 5px;
            margin: 0 5px;
        }
        #screen .content span:hover{
            color: #fff;
            background-color: darkorange;
            cursor: pointer;
        }
        #screen #result{
            border: none;
        }
        #result .content span{
            background-color: #fff;
            border: 1px solid darkorange;
        }
        #screen #result .content span:hover{
            color: royalblue;
            background-color: #fff;
        }
        #screen #result .content span strong{
            color: #aaa;
        }
        #screen #result .content span:hover strong{
            color: darkorange;
        }
    </style>
</head>
<body>
    <div id="screen">
        <ul>
            <li id="menu">
                <div class="name">品牌：</div>
                <div class="content" id="brand">
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                    <span>苹果</span>
                    <span>小米</span>
                    <span>华为</span>
                    <span>联想</span>
                    <span>中兴</span>
                    <span>三星</span>
                    <span>魅族</span>
                    <span>酷派</span>
                    <span>诺基亚</span>
                </div>
            </li>
            <li id="menu">
                <div class="name">价格：</div>
                <div class="content" id="price">
                    <span>500以下</span>
                    <span>500-1000元</span>
                    <span>1000-1500元</span>
                    <span>1500-2000元</span>
                    <span>2000-3000元</span>
                    <span>3000-4000元</span>
                    <span>4000元以上</span>
                </div>
            </li>
            <li id="menu">
                <div class="name">主屏尺寸：</div>
                <div class="content" id="size">
                    <span>6.0英寸以上</span>
                    <span>5.5-6.0英寸</span>
                    <span>5.0-5.5英寸</span>
                    <span>4.5-5.0英寸</span>
                    <span>4.0-4.5英寸</span>
                    <span>4.0英寸以下</span>
                </div>
            </li>
            <li id="menu">
                <div class="name">网络：</div>
                <div class="content" id="network">
                    <span>全网通</span>
                    <span>双4G</span>
                    <span>移动4G</span>
                    <span>联通4G</span>
                    <span>电信4G</span>
                </div>
            </li>
            <li id="menu">
                <div class="name">核心数：</div>
                <div class="content" id="cpu">
                    <span>十核</span>
                    <span>八核</span>
                    <span>双四核</span>
                    <span>四核</span>
                    <span>双核及以下</span>
                </div>
            </li>
            <li id="menu">
                <div class="name">特性：</div>
                <div class="content" id="charactor">
                    <span>大屏幕</span>
                    <span>双卡双待</span>
                    <span>指纹识别</span>
                    <span>千元机</span>
                    <span>拍照神器</span>
                </div>
            </li>
            <li id="result">
                <div class="name">您已选择：</div>
                <div class="content">
                    
                </div>
            </li>
        </ul>
    </div>

    <a href="03-商品筛选.html" target="_blank">示范模板</a>
</body>
</html>

<script>
var i = 0;
$(function(){
    $('#menu .content span').click(active);
    // 为什么没有执行remove
    $('#screen #result .content span').click(remove);

    // 添加所选项
    function active(){
        console.log(this.textContent);
        $(this).css({'background-color':'darkorange','color':'#fff'})
                .siblings().css({'background-color':'#fff','color':'royalblue'});
        // 获取其父元素的id 
        var id = $(this).parent().attr('id');
        console.log(id);
        // if($(this).parent()){

        // }
        $('#result .content').append('<span id="'+id+'">'+this.textContent+'<strong> ×</strong></span>')
        var tId =  $('#result .content span').eq(i).attr('id');
        console.log(tId);
        var len = $('#result .content span').length;
        console.log(len);
        
        i++;
        console.log(i);
    }

    // 移除所选项
    function remove(){
        console.log('执行了移除操作');
        // $(this).css({display:none});
        // remove(this);
    }
})

</script>